<template>
  <div class="main">

<!-- 头部区域 -->
<div class="container">
  <!-- logo区域 -->
  <div class="other">
       <div class="logo">
        <router-link :to="{path:'/'}"></router-link>
       </div>
      </div>

<!-- 搜索区域 -->
      <div class="Search_container">
         <input type="text" name="key" class="iptsearch" v-model.trim="keyvalue">
        <div class="button" @click="submit">
            搜索
       </div>
      </div>

<!-- 我的书架区域 -->
      <div class="book">
        <router-link to="/">我的书架</router-link>
      </div>
</div>

<!-- 小说类型区域 -->
    <div class="type">
        <ul @click="type">
          <li v-for="(item,index) in data" :key="index">
           <div :type="item.type">{{item.name}}</div>
          </li>
        </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Sea-rch',
  data () {
    return {
      keyvalue: '',
      timer: null,
      data: [{ name: '首页', type: 'shouye' }, { name: '玄幻魔法', type: 'xuanhuan' }, { name: '都市言情', type: 'dushi' }, { name: '武侠修真', type: 'wuxia' }, { name: '历史军事', type: 'lishi' }, { name: '恐怖科幻', type: 'kehuan' }, { name: '网游同人', type: 'wangyou' }, { name: '完本小说', type: 'wanben' }]
    }
  },
  methods: {
    // 搜索点击事件
    async  submit () {
      // const data = new FormData()
      // console.log(this.keyvalue)
      // data.append('key', this.keyvalue)
      // const res = await this.$API.reqSearch({ key: this.keyvalue })
      // console.log(res)
      // this.list = res

      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (this.keyvalue.length === 0) {
          this.$message({
            type: 'warning',
            message: '请输入搜索内容',
            center: true
          })
        } else {
          this.$router.push(`/searchresult/${this.keyvalue}`)
          setTimeout(() => {
            // 点击搜索之后置空关键字
            this.keyvalue = ''
          })
        }
      }, 500)
    },
    type (e) {
      const name = e.target.getAttribute('type')
      if (name === 'shouye') {
        return this.$router.push({
          path: '/'
        })
      } else {
        this.$router.push(`/type/${name}`)
      }
    }

  }

}
</script>
<style lang="less" scoped>

.type{
  padding: 10px 8px;
  background-color: #88C6E5;
  color: #fff;
  margin-right: 23px;
  ul{
    display: flex;
    list-style: none;
    padding: 0;
    li{
      cursor: pointer;
      // flex: 1;
      width: 160px;
    div{
      width: 100%;
      height: 100%;
       display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;

    }
    }
     li div:hover,  li div:focus ,  li div:active{

  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  // background-color: pink;
      }

  }
}
a{
  text-decoration: none;
  color:black
}
.container{
    display:flex;
    padding: 0 50px;
    // line-height: 80px;
}
.book{
  flex: 1;
    line-height: 62px;
  text-align: center;
  height: 62px;
  width: 120px;
  text-align: right;
  // background-color: pink;
}
// 搜索区域样式
.Search_container{
    line-height: 62px;
  flex: 1;
  text-align: right;
}
// logo样式
 .logo{
  text-align: left;
    a{
      background: url('https://qidian.gtimg.com/qd/images/logo.29766..png');
      height: 55px;
      width: 218px;
      display: inline-block;
    }
  }
.other{
  flex:1
}

.button{
  cursor: pointer;
  z-index: 0;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  height: 32px;
  width: 50px;
  display: inline-block;
  // outline: 4px solid black;
border-radius: 5px;
position: relative;
overflow: hidden;
vertical-align: middle;
}
.button::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  // transform: translate(-50%,-50%);
    height: 200%;
    width: 200%;
    background-color: pink;
    z-index: -2;
    transform-origin: 0 0;
    animation: rotate 3s infinite linear;
}
.iptsearch{
  width: 200px;
  outline: none;
  text-align: left;
}

.button::after{
  content: '';
  position: absolute;
  background-color: #E9FAFF;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  left: 2px;
  top: 2px;
  border-radius: 5px;
z-index: -1;
}

@keyframes rotate{
  to{
    transform: rotate(1turn);
  }
}
</style>
